<template>
    <div class="mapSearch">
        <!-- 标识区 -->
        <div class="sort">
            <ul>
                <li style="background:#ff7827 ">{{ t(`home.waypoint`) }}</li>
                <li style="background:#2f6ba3 ">{{ t(`home.returnPoint`) }}</li>
                <li style="background:#cb411f ">{{ t(`home.chargingPoint`) }}</li>
                <li style="background:#7b20c9 ">{{ t(`home.cargoPoint`) }}</li>
            </ul>
        </div>
        <!-- 搜索 -->
        <div class="search">
            <div class="crossSwitch">
                <span>{{ t(`home.trafficControlArea`) }}：</span>
                <el-switch v-model="isCross" inline-prompt size="small"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-icon="Check"
                    :inactive-icon="Close" @change="crossChange" />
            </div>
            <el-input v-model="searchVal" style="width: 100%" :placeholder="t(`home.stationSearch`)"
                class="input-with-select" @change="searchChange">
                <template #append>
                    <el-button type="primary" link :icon="Search" @click="searchChange(searchVal)" />
                </template>
            </el-input>
            <!-- 站点详情 -->
            <div class="station_detail">
                <div class="card" v-if="Object.keys(stationDetail).length !== 0">
                    <ul>
                        <li>{{ t(`home.name`) }}：{{ stationDetail?.stationname }}</li>
                        <li>{{ t(`home.type`) }}：{{ formatType(stationDetail?.type) }}</li>
                        <li class="w-100">{{ t(`home.coordinates`) }}：X:{{ roundToThreeDecimalPlaces(stationDetail?.x)
                            }},
                            Y:{{ roundToThreeDecimalPlaces(
                                stationDetail?.y) }}</li>
                        <!-- <li class="w-100">
                            <el-button type="primary" size="small" :icon="useRenderIcon(AddFill)" >
                                定位地图坐标
                            </el-button>
                        </li> -->
                    </ul>
                </div>
                <el-empty :image="noTask" :image-size="100" :description="t(`home.noDataAvailable`)" class="noDetail"
                    v-else />
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref, computed, onMounted } from 'vue'
import { cloneDeep } from "lodash";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useMapStoreHook } from "@/store/modules/map";
import Konva from "konva";
import noTask from '@/assets/images/data.png'
import { message } from "@/utils/message";
import { showCross, hideCross, stage, getCross1 } from './components/dxfMap'
import { useI18n } from "vue-i18n";

import { Search } from '@element-plus/icons-vue'
import AddFill from "@iconify-icons/ri/add-circle-line";
import { Check, Close } from '@element-plus/icons-vue'

const { t } = useI18n();

const pureMap = useMapStoreHook()
const props = defineProps({
    mapData: {
        type: Array<any>,
        required: true,
        default: [{}]
    }
})
// 自定义一个四舍五入到小数点后三位的函数并且除以100
const roundToThreeDecimalPlaces = (value) => {
    return Math.round(value * 1000) / 100000;
}
const stations = ref(props.mapData)
const isCross = ref(false)

const stationDetail: any = ref({})
// 类型
function formatType(status) {
    const stateMap = {
        0: t(`home.waypoint`),
        1: t('home.returnPoint'),
        2: t('home.chargingPoint'),
        3: t('home.cargoPoint')
    }
    return stateMap[status]
}

// 状态
function formatStatus(status) {
    const stateMap = {
        0: '禁用',
        1: '启用',
        2: '锁定',
    }
    return stateMap[status]
}

const stationType = [
    { name: t(`home.waypoint`), color: '#ff7827' },
    { name: t('home.returnPoint'), color: '#2f6ba3' },
    { name: t('home.chargingPoint'), color: '#cb411f' },
    { name: t('home.cargoPoint'), color: '#7b20c9' }
]

var searchVal = ref("")

// 显示交管区域
function crossChange(val) {
    if (val) {
        showCross()
    } else {
        hideCross()
    }
}

function searchChange(val) {
    stationDetail.value = props.mapData.find((v) => { return v.stationname == val }) || {}
    // console.log('站点=>', stationDetail.value);
    const station = pureMap.stageKonva.findOne(`.station-${val}`)
    if (!station) return message(`未查询到该站点`, { type: "error" });
    var tween = new Konva.Tween({
        node: station,
        opacity: 0,
        scaleX: 10,
        scaleY: -10,
        duration: 1.5,
        easing: Konva.Easings.StrongEaseInOut,
        onFinish: function () {
            setTimeout(() => {
                tween.reset()
            }, 5000)
            tween.reset()
            tween.play()
        }
    }).play();
}



</script>

<style lang="scss" scoped>
.mapSearch {
    height: 100%;
    box-sizing: border-box;
}

.sort {
    display: block;
    padding-top: 10px;

    li {
        display: inline-block;
        font-size: 13px;
        color: white;
        padding: 2px 8px;
        border-radius: 5px;
        margin-left: 15px;

        &:nth-child(1) {
            margin-left: 5px;
        }
    }
}

.search::v-deep {
    margin-top: 10px;

    .crossSwitch {
        color: white;
        font-size: 13px;
        padding-left: 5px;
        padding-bottom: 5px;
    }

    .el-input__wrapper {
        background: transparent;
        box-shadow: 0 0 0 1px #5a9cf8 inset;
    }

    .noDetail {
        padding: 0;

        .el-empty__description {
            margin-top: 0;
        }
    }

    .card {
        color: white;
        font-size: 13px;
        margin-top: 10px;

        ul {
            li {
                display: inline-block;
                width: 50%;
                font-family: 'KaiTi';
            }
        }
    }
}

.w-100 {
    display: block !important;
    width: 100% !important;
}

.input-with-select::v-deep {
    .el-input-group__append {
        background: transparent !important;
        box-shadow: 0 1px 0 0 #5a9cf8 inset, 0 -1px 0 0 #5a9cf8 inset, -1px 0 0 0 #5a9cf8 inset;
    }
}
</style>